
<!-- 
	表单 输入类  可带单位

	可用于 年龄 

	@author yangjinlai 20200827

	slotFormSet 是初始表单配置项

	其中的beforeData 是初始表单的值（回显）

    params是表单基本配置项

    其中的 isRequired 表示此表单项是否为必填

	unit 是单位

	maxlength是最长输入长度
	
	oninput 表示需要監聽 input方法

	name 為當前表單類別  其中age-年齡
-->

<template v-slot="slotFormSet">
	<div class="item hasUnit" >

        <!-- 必填项的* -->
        <span class="isRequired" v-if="slotFormSet.params.isRequired">*</span>

        <!-- 左侧的表单名称 -->
	    <!-- <label class="lb">{{slotFormSet.params.label}}</label> -->

        <!-- 右边的单位 传 unit才展示 -->
	    <div class="unit" v-if="slotFormSet.params.unit">{{slotFormSet.params.unit}}</div>

        <!-- 输入框 -->
        <mt-field :label="slotFormSet.params.label" placeholder="请输入用户名" v-model="val" :attr="{ maxlength: slotFormSet.params.maxLength }" :disableClear="disableClear" :oninput="inputFunction()"></mt-field>

	    <!-- <input class="ipt" type="tel" v-model="val" placeholder="请输入" :maxlength="slotFormSet.params.maxLength" :oninput="inputFunction()" ref="slotFormInput"> -->

	</div>
</template>

<script>

export default {
	name: 'slotFormAge',
    props:{
        slotFormSet: { //年龄表单的配置
            type: Object
        },
    },
    data(){
        return {
            val: '' ,

            //不展示x
            disableClear: true,

            //oninput时监听的事件，默认为空函数
            //如果外部传参 oninput为true，按照name值，重设这个函数
            inputFunction: function(){}
        }
    },
    mounted(){

    	//设置oninput的方法
    	if( this.slotFormSet.params.oninput ){
    		console.log( this.slotFormSet.params.oninput )
    		this.inputFunction = function(){
    			this.val = this.$parent.checkForm[this.slotFormSet.params.name](this.val.toString())
    		}
    	}
    },
    watch:{
    	//监听val的变化，如果有变动，给父组件标识
        'val': function(newVal,oldVal){

            console.log('newVal', newVal)
            console.log('oldVal', oldVal)

            this.$parent.changeInputVal( this.slotFormSet.params.name, newVal, oldVal)

            // if( this.slotFormSet.params.isRequired ){
            //    //是必填项
            //    if(!!newVal && newVal != oldVal){
            //        console.log('customer值变化')
            //        //值有改变，且新值和旧值不相等
            //        //触发父元素的切换按钮状态的方法
            //        this.$parent.changeInputVal( this.slotFormSet.params.name, newVal, this.slotFormSet.beforeData)
            //    }
            // }
            // else{
            //    //不是必填项  直接触发
            //    this.$parent.changeInputVal( this.slotFormSet.params.name, newVal, this.slotFormSet.beforeData)
            // }
        },
        
        //监听外部传参的变化
        'slotFormSet.beforeData': function(newVal,oldVal){
            console.log('设置input接口数据', newVal)
            this.val = newVal
        },
    }
}
</script>
